<!--
    笔记
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.boxLeft
        UserUnit
        Personage
      div.boxRight
        h1 笔记
        div.center
          span.kecheng-span(v-for="(item, index) in collect" @click="isName(item,index)"  :class="index === isIndex?'Greens':''") {{item.title }}
          img(src="/static/note/u6931.png" @click="NoteShow")
          div.black(ref="black")
          div.black-box(ref="blacks")
            p.blackTitle 编辑笔记
            div.blackBx
              ul
                li
                  span.centerP 笔记标题 :
                  el-input( placeholder="" )
                li
                  span.centerP
                  span.cenPosition 笔记内容 :
                  textarea( style="resize:none" maxlength="500" placeholder="" @keyup.enter="")
                li
                  span.centerP 上传文件 :
                  kalix-upload(v-model ="img" v-bind:isImage="true" style="width:90px")
                li
                  span.centerP 是否公开 :
                  input(type="radio" name="aa" value="1")
                  span 公开
                  input(type="radio" name="aa" value="2")
                  span 不公开
              div.blackBC
                span.save(@click="presrve") 保存
                span.cancel(@click="conceal") 取消
        div.nodeDiv
          div.nodeList(
            v-for="(item, index) in multi.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            :key="index"
            )
            div.headPortrait
              router-link(:to="{name: 'NoteDetails'}")
                img(:src="item.leftImg")
            div.headCenter
              div.headName
                router-link(:to="{name: 'NoteDetails'}")
                  span.userName {{item.name}}
                span.collect(@click="cliShow") {{txt}}
              router-link(:to="{name: 'NoteDetails'}")
                div.nodeTitle {{item.title}}
              router-link(:to="{name: 'NoteDetails'}")
                div.nodeCenter {{item.content}}
              div.nodeImg(v-for="son in  article")
                router-link(:to="{name: 'NoteDetails'}")
                  img(:src="son.img")
              div.headBottom
                router-link(:to="{name: 'NoteDetails'}")
                  span {{ytd}}
                  span {{time}}
                  span 阅读: {{page}}
                div.praise(@click="praise")
                  img(src="static/OpenPage/u1158.png")
                  span {{dotpraise}}
                div.reply
                  img(src="static/OpenPage/u1154.png")
                  span 200
            img(src="static/note/u6816.png").wirepraise
          div.paging
            el-pagination(
            @size-change="handleSizeChange"
            @current-change="current_change"
            :current-page="currentPage"
            :page-size="pagesize"
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, total, jumper"
            :total="multi.length")
    div.clearfix
</template>

<script type="text/ecmascript-6">
  import KalixUpload from '../../components/Layout/baseUpload'

  export default {
    name: 'Note',
    components: {KalixUpload},
    data() {
      return {
        total: 1000, // 默认数据总数
        pagesize: 2, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        dotpraise: 0,
        isdot: true,
        collect: [
          {title: '全部'},
          {title: '我的'},
          {title: '推荐'},
          {title: '点赞'}
        ],
        isIndex: 0,
        txt: '收藏',
        isShow: false,
        multi: [
          {
            dot: 10,
            name: '尼古拉斯赵四',
            leftImg: 'static/OpenPage/用户头像_u1176.png',
            title: '东北舞王是怎样炼成的',
            content: '这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多'
          },
          {
            dot: 20,
            name: '尼古拉斯赵四',
            leftImg: 'static/OpenPage/用户头像_u1176.png',
            title: '东北舞王是怎样炼成的',
            content: '这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多'
          },
          {
            dot: 30,
            name: '尼古拉斯赵四',
            leftImg: 'static/OpenPage/用户头像_u1176.png',
            title: '东北舞王是怎样炼成的',
            content: '这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。'
          },
          {
            dot: 40,
            name: '尼古拉斯赵四',
            leftImg: 'static/OpenPage/用户头像_u1176.png',
            title: '东北舞王是怎样炼成的',
            content: '这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。'
          }
        ],
        article: [
          {img: 'static/OpenPage/u1164.png'},
          {img: 'static/OpenPage/u1164.png'},
          {img: 'static/OpenPage/u1164.png'},
          {img: 'static/OpenPage/u1164.png'}
        ],
        year: null,
        month: null,
        day: null,
        ytd: null,
        hour: null,
        minute: null,
        getSeconds: null,
        time: null,
        page: 0,
        img: ''
      }
    },
    mounted() {
      this.NewData()
      this.page++
    },
    methods: {
      presrve() {
        this.$refs.black.style.display = 'none'
        this.$refs.blacks.style.display = 'none'
      },
      conceal() {
        this.$refs.black.style.display = 'none'
        this.$refs.blacks.style.display = 'none'
      },
      NewData() {
        var date = new Date()
        this.year = date.getFullYear()
        this.month = date.getMonth() + 1
        this.day = date.getDate()
        this.ytd = this.year + '-' + this.month + '-' + this.day
        this.hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        this.minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        this.time = this.hour + ':' + this.minute
      },
      NoteShow() {
        this.$refs.black.style.display = 'block'
        this.$refs.blacks.style.display = 'block'
      },
      disappear() {
        this.$refs.black.style.display = 'none'
        this.$refs.blacks.style.display = 'none'
      },
      cliShow() {
        this.txt = this.isShow ? '收藏' : '已收藏'
        this.isShow = !this.isShow
      },
      praise() {
        if (this.isdot) {
          this.dotpraise++
          this.isdot = !this.isdot
        } else {
          this.dotpraise--
          this.isdot = !this.isdot
        }
      },
      isName(item, index) {
        this.isIndex = index
      },
      current_change: function (currentPage) {
        this.currentPage = currentPage
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 5px auto

  h1
    font-size 20px
    color #FF9933
    margin-bottom 36px

  .center
    margin-top 36px
    margin-bottom 26px
    img
      margin-left 520px
      cursor pointer

  .kecheng-span
    font-size 18px
    margin-right 40px
    color #666
    cursor pointer

  .Greens
    color #0099FF

  .boxLeft
    width 247px
    height 1471px
    float left

  .boxRight
    width 926px
    height 1471px
    min-height 1471px
    border 1px solid #ccc
    border-radius 5px
    float right
    padding 20px 20px 0 24px
    box-sizing border-box
    overflow-y auto
    overflow-x hidden

  .boxLeftBottom
    width 247px
    height 1140px
    .personage
      display block
      width 247px
      height 60px
      line-height 60px
      text-align center
      border 1px solid #ccc
      background-color #F2F2F2
      cursor pointer
      position relative
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      .icon
        position absolute
        width 20px
        height 20px
        top 1px
        left 56px
        font-size 22px
        color #333333
    .listBorder
      border none
      border-left 4px solid #FF9933
      background-color #fff
      span
        color #FF9933 !important
    .text
      color #666666
      font-size 18px

  .nodeList
    width 860px
    overflow hidden
    position relative
    margin 20px 0
    .wire
      width 100%
      height 2px
      position absolute
      left 0
      bottom 0

  .headPortrait
    float left

  .headCenter
    float right
    width 780px
    .headName
      position relative
      .userName
        font-size 18px
        font-weight 700
      .collect
        display inline-block
        width 70px
        height 28px
        line-height 28px
        text-align center
        border 1px solid #999
        color #999
        border-radius 5px
        position absolute
        right 0
        cursor  pointer
    .nodeTitle
      font-size 18px
      margin-top 10px
    .nodeCenter
      font-size 14px
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-box-orient vertical
      -webkit-line-clamp 4
      margin 10px 0
    .nodeImg
      display inline-block
      img
        margin-right 10px
    .headBottom
      margin 20px 0
      color #666
      span
        margin-right 20px
      .praise
        display inline-block
        margin-left 360px
        img
          width 20px
          height 20px
      .reply
        display inline-block
        img
          width 20px
          height 20px

  .nodeDiv
    position relative

  .paging
    position absolute
    left 50%
    bottom -100px
    margin-left -42%
    margin-bottom 20px

  /*笔记弹窗*/
  .black
    width 100%
    height 100%
    background-color #000
    position fixed
    top 0
    left 0
    z-index 998
    opacity 0.3
    display none

  .black-box
    width 876px
    height 696px
    background-color #fff
    position fixed
    left 0
    top 0
    right 0
    bottom 0
    margin auto
    z-index 999
    display none
    border-radius 10px
    padding 30px 0 0 40px
    .blackTitle
      font-size 20px
      color #FF9933
    .blackBx
      width 550px
      margin-left 120px
      margin-top 50px
      li
        margin 18px 0
        width 500px
        position relative
      textarea
        width 300px
        height 292px
        box-sizing border-box

  .centerP
    display inline-block
    width 90px
    margin-right 20px
    text-align right
    color #525252

  .cenPosition
    position absolute
    left 18px
    top 0

  .blackBC
    margin 30px 0 0 180px
    span
      display inline-block
      width 100px
      height 35px
      line-height 35px
      border-radius 5px
      text-align center
      color #fff
      margin-right 30px
      cursor pointer
    .save
      background-color #FF9933
    .cancel
      background-color #999
</style>

<style lang="stylus" rel="stylesheet/stylus">
  .blackBx
    .el-input
      width 300px
      height 30px
      .el-input__inner
        width 100%
        height 100%
</style>
